<script setup>
import {ref, reactive, onBeforeMount} from 'vue'
import {deleteAPI, getUserByIdAPI, userStateUpdateAPI} from "@/apis/system/user/user";
import {roleListAPI, roleCheckListAPI} from "@/apis/system/role/role";
import {storeToRefs} from 'pinia'
import {Delete, Edit, Search, UserFilled} from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// 导入userForm
import userForm from './components/userForm.vue'
// 导入角色分配框
import RoleAssignmentsDialog from './components/roleAssignmentsDialog.vue'
import {ElMessage} from "element-plus";
import {useUserListStore} from "@/stores/system/user/useUserList";

/* 获取用户列表*/
//storeToRefs只能结构复制 普通变量  函数是不可以的
const useUserList = useUserListStore()
const {userList, page} = storeToRefs(useUserList)
const {getUserList} = useUserList
onBeforeMount(() => {
  getUserList()
})
/* 表格ref */
const multipleTableRef = ref()
/* 表格多选的数据 */
const multipleSelection = ref([])
/* 表格多选的数据改变*/
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(multipleSelection.value)
}
// 批量删除
const deletes = async () => {
  if (multipleSelection.value.length !== 0) {
    let ids = []

    multipleSelection.value.forEach(item => {
      ids.push(item.id)
    })
    const {data: res} = await deleteAPI(ids.join(","))
    if (res.code == 200) {
      ElMessage.success(res.data)
      getUserList()
    } else {
      ElMessage.error(res.message)
    }
  } else {
    ElMessage.warning("请勾选要删除的行")
  }
}

/* 用户状态改变*/
const switchChange = async (id, enabled) => {
  const {data: res} = await userStateUpdateAPI(id, enabled)
  if (res.code == 200) {
    ElMessage.success(res.data)
    getUserList()
  }
}

// 控制表单可性
const userFormIsVisible = ref(false)
const fromTitle = ref("")
const userFormIsVisibleIsTrue = () => {
  fromTitle.value = "添加用户"
  userFormIsVisible.value = true
}
const updateUserFormIsVisibleIsFalse = () => {
  userFormIsVisible.value = false
}

//
const form = ref(null)
// 编辑用户信息
const editForm = async (id) => {
  fromTitle.value = "编辑用户信息"
  const {data: res} = await getUserByIdAPI(id)
  form.value.userData = res.data
  userFormIsVisible.value = true
}
// 查询关键字
const selectkey = ref("")
const select = () => {
  getUserList(selectkey.value)
}
// 分页
// 每页数据大小改变
const handleSizeChange = (val) => {
  page.value.size = val
  getUserList(selectkey.value)
}
// 当前页码改变
const handleCurrentChange = (val) => {
  page.value.page = val
  getUserList(selectkey.value)
}


// 角色分配
const roleAssignmentsDialog = ref(null)
// 打开角色分配框
const openRoleAssignmentsDialog = async (uid) => {
  roleAssignmentsDialog.value.uid = uid
  const {data: res} = await roleListAPI()
  roleAssignmentsDialog.value.roleList = res.data
  const res2 = await roleCheckListAPI(uid)
  roleAssignmentsDialog.value.checkList = res2.data.data
  roleAssignmentsDialog.value.isVisible = true

}

</script>

<template>
  <el-config-provider :locale=zhCn>
    用户列表
    <el-row :gutter="10" style="margin-top: 20px">
      <el-col :span="4">
        <el-input
            v-model="selectkey"
            placeholder="请输入用户名称"
            :prefix-icon="Search"
        />
      </el-col>
      <el-col :span="2">
        <el-button type="primary" :icon="Search" @click="select">查询</el-button>
      </el-col>

      <el-col :span="2">
        <el-button type="primary" @click="userFormIsVisibleIsTrue">添加</el-button>
      </el-col>
      <el-col :span="1">

        <el-popconfirm
            @confirm="deletes"
            width="220"
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="你确定要删除?"
        >
          <template #reference>
            <el-button type="danger">批量删除</el-button>
          </template>
        </el-popconfirm>

      </el-col>
    </el-row>
    <!--  表格  -->
    <el-table
        ref="multipleTableRef"
        :data="userList"
        style="width: 100%"
        stripe
        border
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column property="username" label="用户名" width="120"/>
      <el-table-column property="realName" label="名称" width="120"/>
      <el-table-column property="departmentName" label="部门名称" width="120"/>
      <el-table-column property="gender" label="性别" width="80">
        <template #default="scoped">
          {{ scoped.row.gender === 0 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column property="enabled" label="状态" width="120">
        <template #default="scoped">
          <el-switch @change="switchChange(scoped.row.id,scoped.row.enabled)"
                     :model-value="scoped.row.enabled"/>

        </template>
      </el-table-column>
      <el-table-column property="phone" label="电话"/>
      <el-table-column property="email" label="邮箱"/>
      <el-table-column property="gender" label="操作">
        <template #default="scoped">
          <el-button type="primary" size="small" :icon="Edit" @click="editForm(scoped.row.id)"> 编辑</el-button>
          <el-button type="warning" size="small" :icon="UserFilled" @click="openRoleAssignmentsDialog(scoped.row.id)">
            分配角色
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页   -->
    <el-pagination style="margin-top: 15px;" :page-sizes="[5, 20, 100]" background
                   layout="total,sizes,prev, pager, next" :total="page.total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   v-model:current-page="page.page"
                   v-model:page-size="page.size"
    />


    <!-- userForm -->
    <userForm ref="form" @updateUserFormIsVisibleIsFalse="updateUserFormIsVisibleIsFalse"
              :fromTitle="fromTitle"
              :userFormIsVisible="userFormIsVisible"/>

    <RoleAssignmentsDialog ref="roleAssignmentsDialog"/>

  </el-config-provider>

</template>

<style lang="scss" scoped>
.el-table {
  margin-top: 20px;
}
</style>
